<template>
  <div class="teach">
    <div class="teach-header">
      <el-input v-model="title" placeholder="输入课程名称" size="mini"></el-input>
      <el-button plain size="mini" @click="onSearch">筛选</el-button>

      <el-link icon="el-icon-setting" :underline="false" @click="handleSetting">{{
        setting ? '取消管理' : '管理'
      }}</el-link>
    </div>
    <el-row class="teach-list" :gutter="22">
      <el-col :span="6" v-for="(item, index) in teacherCourseList" :key="item.id">
        <div class="item">
          <div class="picture">
            <EduCourseImage
              :image="item.cover_url"
              :courseType="item.course_type"
              :courseTypeText="item.course_type_text"
              :height="110"
              :border-radius="4"
              @click="handlePush(item)"
            ></EduCourseImage>
            <el-popover
              placement="bottom-end"
              width="65"
              trigger="hover"
              :visible-arrow="false"
              popper-class="teach-popover-hover"
            >
              <div class="teach-popover-content">
                <!-- 未完结时显示课时管理 -->
                <el-link
                  :underline="false"
                  @click="handleSection(item)"
                  v-if="item.update_status == 1"
                  >课时管理</el-link
                >
                <!-- 面授才有签到 -->
                <el-link :underline="false" v-if="item.course_type == 4">签到记录</el-link>
                <el-link :underline="false" @click="handleEditCourse(item.id)">编辑</el-link>
                <el-link
                  :underline="false"
                  @click="handleOpenCourse(index, item.id)"
                  v-if="item.status == 0"
                  >打开课程</el-link
                >
                <el-link
                  :underline="false"
                  @click="handleCloseCourse(index, item.id)"
                  v-else-if="item.status == 1"
                  >关闭课程</el-link
                >
              </div>
              <el-button slot="reference" icon="el-icon-more" size="mini" circle></el-button>
            </el-popover>
          </div>
          <div class="title" @click="handlePush(item)">{{ item.title }}</div>
          <div v-if="setting" class="delete-bg"></div>
          <transition name="el-fade-in">
            <el-row
              class="delete"
              type="flex"
              align="middle"
              justify="center"
              v-if="setting"
              @click.native="handleDeleteCourse(item.id)"
            >
              <i class="el-icon-delete"></i>
              <span class="text">删除</span>
            </el-row>
          </transition>
        </div>
      </el-col>
    </el-row>
    <edu-no-data v-if="teacherCourseList.length == 0"></edu-no-data>
    <edu-pagination @handleCurrentChange="handleCurrentChange"></edu-pagination>
  </div>
</template>

<script>
import EduNoData from '@/components/EduNoData'
import EduPagination from '@/components/EduPagination'
import EduCourseImage from '@/components/EduCourseImage'
export default {
  components: {
    EduNoData,
    EduPagination,
    EduCourseImage
  },
  inject: ['reload'],
  data() {
    return {
      teacherCourseList: [],
      setting: false,
      couponType: 'all',
      title: ''
    }
  },
  created() {
    this.handleTeacherCourseList()
  },
  methods: {
    // 列表数据
    handleTeacherCourseList() {
      this.$api.getTeacherCourseList(
        this.couponType,
        {
          page: this.$store.getters['paginate/page'],
          count: 20,
          title: this.title
        },
        res => {
          const { data } = res
          this.teacherCourseList = data.data
          this.$store.dispatch('paginate/setPaginate', {
            listRows: 20,
            total: data.total
          })
        }
      )
    },
    // 分页
    handleCurrentChange() {
      this.handleTeacherCourseList()
    },
    // 管理课程
    handleSetting() {
      this.setting = !this.setting
    },
    // 删除课程
    handleDeleteCourse(id) {
      this.$messageBox
        .confirm('是否删除课程？')
        .then(() => {
          this.$api.deleteTeacherCourseDelete(
            id,
            res => {
              this.handleTeacherCourseList()
              this.setting = false
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 打开课程
    handleOpenCourse(index, id) {
      console.log(index)
      this.$messageBox
        .confirm('是否打开课程？')
        .then(() => {
          this.teacherCourseList[index].status = 1
          this.$api.updateTeacherCourseOpen(id, res => {
            this.$message.success(res.msg)
          })
        })
        .catch(() => {})
    },
    // 关闭课程
    handleCloseCourse(index, id) {
      this.$messageBox
        .confirm('是否关闭课程？')
        .then(() => {
          this.teacherCourseList[index].status = 0
          this.$api.updateTeacherCourseClose(id, res => {
            this.$message.success(res.msg)
          })
        })
        .catch(() => {})
    },
    // 编辑课程
    handleEditCourse(id) {
      this.$router.push({
        path: '/my/classes/teach/edit',
        query: {
          id: id
        }
      })
    },
    // 课时管理
    handleSection(item) {
      if (item.course_type == 1) {
        this.$router.push({
          path: '/my/classes/teach/video/' + item.id
        })
      } else if (item.course_type == 2) {
        if (item.course_live_type == 1) {
          this.$router.push({
            path: `/my/classes/teach/live/big/${item.id}`
          })
        } else {
          this.$router.push({
            path: `/my/classes/teach/live/small/${item.id}`
          })
        }
      }
    },
    // 跳转课程
    handlePush(item) {
      this.$router.push({ path: '/course/' + item.id })
    },
    onSearch() {
      this.$store.dispatch('paginate/setPaginate', {
        currentPage: 1
      })
      this.handleTeacherCourseList()
    }
  },
  destroyed() {
    this.$store.commit('paginate/SET_PAGINATE_DEFAULT')
  }
}
</script>
<style lang="scss">
.teach-popover-hover {
  min-width: auto !important;
  padding: 5px 0 !important;

  .teach-popover-content {
    .el-link {
      display: flex;
      font-size: 12px;
      padding: 3px 0;
    }
  }
}
</style>
<style lang="scss" scoped>
@import '@/styles/hover.scss';
.teach {
  .teach-header {
    display: flex;
    align-items: center;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
    .el-link {
      margin-left: auto;
    }
  }
  .teach-list {
    margin-top: 15px;
    .item {
      margin-bottom: 20px;
      position: relative;
      .picture {
        position: relative;
        .el-button {
          position: absolute;
          right: 7px;
          top: 7px;
          border: none;
          padding: 4px;
          opacity: 0;
          @include prefixed(transition-duration, 0.3s);
        }
        &:hover .el-button {
          opacity: 1;
        }
      }
      .delete-bg {
        background: rgba(0, 0, 0, 0.15);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 110px;
        border-radius: 4px;
      }
      .delete {
        position: absolute;
        left: 50%;
        top: 18px;
        z-index: 10;
        margin-left: -37px;
        width: 74px;
        height: 74px;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        flex-direction: column;
        color: #fff;
        cursor: pointer;
        .el-icon-delete {
          font-size: 16px;
        }
        .text {
          font-size: 13px;
          margin-top: 5px;
        }
      }
      .title {
        margin-top: 14px;
        padding: 0 6px;
        color: $text-color-import;
        font-size: 14px;
        cursor: pointer;
        @include ellipsis();
      }
    }
  }
}
</style>
